<template>
	<view>
		<StatusBar />
		<!-- 导航 -->
		<view style="background:#f15885;color:#ffffff;position: fixed;top:0;left: 0;width:750rpx;z-index: 99999;">
			<view class="statusBarHeight"></view>
			<view style="padding:0 20rpx;font-size:32rpx;height:88rpx;line-height: 88rpx;">娃娃排行榜</view>
			<view class="flexBetween" style="font-size: 28rpx;color: #FFFFFF;">
				<view v-for="(item,index) in range_type_list" :key="index" style="flex:1;text-align: center;height: 50rpx;line-height: 50rpx;box-sizing: border-box;" :style="index==range_type_idx?'font-size:32rpx;border-bottom:2px solid #ffffff':''" @click="setRangeTypeIdx(index)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<swiper class="swiperContainer" @change="swiperChange">
			<swiper-item v-for="(item,index) in range_type_list" :key="index">
				<view style="background:#f15885;color:#ffffff;height: 100vh;overflow: scroll;">
					<view class="statusBarHeight"></view>
					<view style="height: 138rpx;"></view>
					<!-- 领奖台区域 -->
					<view style="height: 330rpx;width: 750rpx;position: relative;overflow: hidden;">
						<!-- 领奖台背景图片 -->
						<!-- <image mode="widthFix" src="../../static/range.png" style="width: 630rpx; height: auto;position: absolute;left:60rpx;bottom:-10rpx"></image> -->
						<!-- 第一名 -->
						<view v-if="ranking.length>=1" style="position: absolute;top:40rpx;left: calc( 50% - 60rpx );width:120rpx;height: 400rpx;">
							<view style="position: relative;width:120rpx;height: 120rpx;">
								<!-- <view style="width: 40rpx;height: 40rpx;border-radius: 20rpx;background:#ffe908;position: absolute;top:-8rpx;left:-8rpx"></view>
								<view style="width: 40rpx;height: 40rpx;border-radius: 20rpx;background:#ffe908;position: absolute;top:-8rpx;right:-8rpx"></view> -->

								<!-- <view style="width: 50rpx;height: 40rpx;border-radius: 20rpx;position: absolute;top:-16rpx;left:-20rpx;background-image: url(../../static/chibang-left.png);background-size: cover;"></view>
								<view style="width: 50rpx;height: 40rpx;border-radius: 20rpx;position: absolute;top:-16rpx;right:-20rpx;background-image: url(../../static/chibang-right.png);background-size: cover;"></view> -->


								<view style="box-sizing: border-box; width: 120rpx;height: 120rpx;background: #d9d8dc;border:4rpx solid #ffe908;border-radius: 50%;position: absolute;top:0;left:0">
									<image :src="baseURL+ranking[0].img" style="width: 100%;height: 100%;border-radius: 50%;"></image>
								</view>
								<view style="height: 36rpx;background:#ffe908;color: #f15885;font-size: 24rpx;text-align: center ;line-height: 36rpx;border-radius:18rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position: absolute;bottom:-18rpx;left:50%;padding:0 5rpx;transform: translateX(-50%);">{{ranking[0].num}}</view>
							</view>
							<view style="color: #FFFFFF;margin-top: 70rpx;width: 120rpx;text-align: center;line-height: 50rpx;height: 50rpx;border-radius: 25rpx;background: rgba(0,0,0,0.3);font-size: 24rpx;overflow: hidden;">{{ranking[0].name}}</view>
						</view>
						<!-- 第二名 -->
						<view v-if="ranking.length>=2" style="position: absolute;top:90rpx;left: 120rpx;width:100rpx;height: 370rpx;">
							<view style="position: relative;width:100rpx;height: 100rpx;">
								<view style="width: 50rpx;height: 40rpx;border-radius: 20rpx;position: absolute;top:-16rpx;left:-20rpx;background-image: url(../../static/chibang-left.png);background-size: cover;"></view>
								<view style="width: 50rpx;height: 40rpx;border-radius: 20rpx;position: absolute;top:-16rpx;right:-20rpx;background-image: url(../../static/chibang-right.png);background-size: cover;"></view>
								<view style="box-sizing: border-box; width: 100rpx;height: 100rpx;background: #d9d8dc;border:4rpx solid #fdfffe;border-radius: 50%;position: absolute;top:0;left:0">
									<image :src="baseURL+ranking[1].img" style="width: 100%;height: 100%;border-radius: 50%;"></image>
								</view>
								<view style="height: 36rpx;background:#fdfffe;color: #f15885;font-size: 24rpx;text-align: center ;line-height: 36rpx;border-radius:18rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position: absolute;bottom:-18rpx;left:50%;padding:0 5rpx;transform: translateX(-50%);">{{ranking[1].num}}</view>
							</view>
							<view style="color: #FFFFFF;margin-top: 80rpx;margin-left:-10rpx;width: 120rpx;text-align: center;line-height: 50rpx;height: 50rpx;border-radius: 25rpx;background: rgba(0,0,0,0.3);font-size: 24rpx;overflow: hidden;">{{ranking[1].name}}</view>
						</view>
						<!-- 第三名 -->
						<view :src="baseURL+ranking[2].img" style="position: absolute;top:90rpx;right: 120rpx;width:100rpx;height: 370rpx;">
							<view style="position: relative;width:100rpx;height: 100rpx;">
								<view style="width: 50rpx;height: 40rpx;border-radius: 20rpx;position: absolute;top:-16rpx;left:-20rpx;background-image: url(../../static/chibang-left.png);background-size: cover;"></view>
								<view style="width: 50rpx;height: 40rpx;border-radius: 20rpx;position: absolute;top:-16rpx;right:-20rpx;background-image: url(../../static/chibang-right.png);background-size: cover;"></view>
								<view style="box-sizing: border-box; width: 100rpx;height: 100rpx;background: #d9d8dc;border:4rpx solid #fccda1;border-radius: 50%;position: absolute;top:0;left:0">
									<!-- <image src="../../static/logo.png" style="width: 100%;height: 100%;border-radius: 50%;"></image> -->
								</view>
								<view style="height: 36rpx;background:#fccda1;color: #f15885;font-size: 24rpx;text-align: center ;line-height: 36rpx;border-radius:18rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;position: absolute;bottom:-18rpx;left:50%;padding:0 5rpx;transform: translateX(-50%);">{{ranking[2].num}}</view>
							</view>
							<view style="color: #FFFFFF;margin-top: 80rpx;margin-left:-10rpx;width: 120rpx;text-align: center;line-height: 50rpx;height: 50rpx;border-radius: 25rpx;background: rgba(0,0,0,0.3);font-size: 24rpx;overflow: hidden;">{{ranking[2].name}}</view>
						</view>
					</view>
					<!-- 常规排名 -->
					<view style="padding: 20rpx;border-radius: 20rpx 20rpx 0 0;background:#FFFFFF;">
						<view v-if="ranking.length>=4&&index>=4" v-for="(item,index) in ranking" :key="index" style="height: 90rpx;" class="flexBetween">
							<view class="flexAc">
								<view style="font-size: 36rpx;color: #fccda1;width:60rpx;">{{index}}</view>
								<image :src="baseURL+item.img" style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
								<view style="font-size: 28rpx;color: #333333;margin-left: 20rpx;">{{item.name}}</view>
							</view>
							<view style="font-size: 28rpx;color: #f15885;">{{item.num}}个</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 排行榜类型
				range_type_list:["娃娃总榜","娃娃月榜","兑换总榜","兑换月榜"],
				// 已选中排行榜类型索引
				range_type_idx:0,
				ranking:[],
				baseURL:this.baseURL,
			}
		},
		onLoad() {
			this.get_ranking()
		},
		methods: {
			get_ranking(){
				this.get('crud/list',{}).then(({code,paginate})=>{
					if(code===1){
						
					}
				})
				
				// var thiz=this;
				// thiz.ajax({
				// 	method: 'GET',
				// 	data: {
				// 		rank_type:this.range_type_idx+1,
				// 	},
				// 	success: function(r) {
				// 		console.log('ranking',r)
				// 		if(r.code==1){
				// 			thiz.ranking=r.data.ranking
				// 		}else{
				// 			thiz.error(r.msg)
				// 		}
				// 	}
				// }, '/index/index/ranking');
			},
			swiperChange(e){
				this.setRangeTypeIdx(e.detail.current)
			},
			setRangeTypeIdx(idx){
				if(this.range_type_idx!=idx){
					this.range_type_idx=idx;
					// do ajax data
					this.get_ranking()
				}
			}
		}
	}
</script>

<style scoped>
	.swiperContainer{
		height: 100vh;
	}
</style>
